تسلط بر جدول زمانی پیمایش CSS: راهنمای قطعی برای کنترل انیمیشن

وب در حال تکامل است و با آن، روش‌های تعامل ما با محتوا. روزهای صفحات ایستا گذشته است. اکنون کاربران انتظار تجربه‌های پویا و جذابی را دارند. جدول‌های زمانی پیمایش CSS ابزاری قدرتمند برای ایجاد آن تجربه‌ها هستند و به شما امکان می‌دهند انیمیشن‌ها را مستقیماً به موقعیت پیمایش یک عنصر متصل کنید. این بدان معناست که انیمیشن‌ها همگام با پیمایش کاربر، پخش، مکث و معکوس می‌شوند و یک رابط کاربری یکپارچه و بصری ایجاد می‌کنند. این راهنما به پیچیدگی‌های قانون scroll-timeline می‌پردازد و دانش و مثال‌های عملی را برای ایجاد انیمیشن‌های خیره‌کننده مبتنی بر پیمایش در اختیار شما قرار می‌دهد.

جدول زمانی پیمایش CSS چیست؟

جدول‌های زمانی پیمایش CSS به شما امکان می‌دهند انیمیشن‌های CSS را بر اساس موقعیت پیمایش یک کانتینر کنترل کنید. به جای تکیه بر جاوا اسکریپت یا فریم‌های کلیدی CSS سنتی با مدت زمان مبتنی بر زمان، پیشرفت انیمیشن مستقیماً به پیشرفت پیمایش نگاشت می‌شود. این منجر به انیمیشن‌هایی می‌شود که ذاتاً به اقدامات کاربر متصل هستند و منجر به تجربه کاربری جذاب‌تر و پاسخگوتر می‌شوند.

یک نوار پیشرفت را تصور کنید که با پیمایش صفحه به سمت پایین پر می‌شود، یا یک هدر که هنگام پیمایش یک مقاله کوچک شده و به بالا می‌چسبد. اینها تنها چند نمونه از کارهایی هستند که می‌توانید با جدول‌های زمانی پیمایش CSS به آنها برسید.

درک قانون scroll-timeline

ویژگی scroll-timeline هسته این فناوری است. منبع پیشرفت پیمایش را که انیمیشن شما را هدایت می‌کند، تعریف می‌کند. این می‌تواند کانتینرهای پیمایش مختلف را هدف قرار دهد و به شما امکان می‌دهد انیمیشن‌هایی ایجاد کنید که به مناطق پیمایش مختلف در صفحه شما پاسخ می‌دهند.

نحو

نحو اساسی برای ویژگی scroll-timeline به شرح زیر است:

            scroll-timeline: <timeline-name> [ <orientation> ]?;
            

              
                Copy
              
            
          

• <timeline-name>: این یک نام سفارشی است که به جدول زمانی پیمایش اختصاص می‌دهید. از این نام برای مرتبط کردن انیمیشن‌ها با جدول زمانی استفاده خواهید کرد.
• <orientation> (اختیاری): جهت پیمایش را برای ردیابی مشخص می‌کند. می‌تواند block (عمودی), inline (افقی) یا both باشد. اگر حذف شود، مرورگر جهت‌گیری را بر اساس جهت غالب ناحیه قابل پیمایش استنباط می‌کند.

ایجاد یک جدول زمانی پیمایش

برای ایجاد یک جدول زمانی پیمایش، ابتدا باید کانتینر پیمایش را انتخاب کنید. این عنصری است که موقعیت پیمایش آن برای هدایت انیمیشن استفاده خواهد شد. سپس، ویژگی scroll-timeline را به آن اعمال می‌کنید و نامی به جدول زمانی می‌دهید.

            /* HTML */
<div class="scroll-container">
 <div class="content">...
 </div>
</div>

            

              
                Copy
              
            
          

            /* CSS */
.scroll-container {
 overflow-y: auto; /* Enable vertical scrolling */
 height: 300px; /* Set a fixed height for the container */
 scroll-timeline: my-scroll-timeline block; /* Create a scroll timeline named "my-scroll-timeline" for vertical scrolling */
}

            

              
                Copy
              
            
          

در این مثال، ما یک جدول زمانی پیمایش به نام my-scroll-timeline ایجاد کرده‌ایم که با پیمایش عمودی عنصر .scroll-container مرتبط است.

مرتبط کردن انیمیشن‌ها با جدول زمانی پیمایش

هنگامی که یک جدول زمانی پیمایش را تعریف کردید، باید آن را به یک انیمیشن متصل کنید. این کار با استفاده از ویژگی animation-timeline در عنصری که می‌خواهید انیمیت کنید، انجام می‌شود. این ویژگی را روی نام جدول زمانی پیمایشی که ایجاد کرده‌اید، تنظیم می‌کنید.

            /* HTML */
<div class="scroll-container">
 <div class="animated-element">...
 </div>
</div>

            

              
                Copy
              
            
          

            /* CSS */
.animated-element {
 animation: slide-in 3s linear forwards;
 animation-timeline: my-scroll-timeline;
}

            

              
                Copy
              
            
          

در این مثال، .animated-element با استفاده از انیمیشن slide-in انیمیت می‌شود و پیشرفت آن توسط my-scroll-timeline کنترل می‌شود. ویژگی duration در اختصار animation هنگام استفاده از جدول‌های زمانی پیمایش نادیده گرفته می‌شود. مدت زمان انیمیشن توسط محدوده قابل پیمایش کانتینر پیمایش تعیین می‌شود.

نکات کلیدی برای طراحی انیمیشن

• انتخاب انیمیشن‌های مناسب: انیمیشن‌هایی را انتخاب کنید که در زمینه پیمایش منطقی باشند. تبدیل‌های ساده مانند مقیاس‌بندی، محو شدن یا جابجایی عناصر اغلب مؤثر هستند. از انیمیشن‌های بیش از حد پیچیده که ممکن است ناخوشایند یا حواس‌پرت‌کننده باشند، خودداری کنید.
• همگام‌سازی کلیدی است: اطمینان حاصل کنید که پیشرفت انیمیشن شما به خوبی با پیشرفت پیمایش همسو باشد. با منحنی‌های انیمیشن مختلف (animation-timing-function) آزمایش کنید تا به اثر دلخواه برسید. linear یک نقطه شروع خوب است.
• عملکرد مهم است: انیمیشن‌های مبتنی بر پیمایش می‌توانند از نظر عملکرد فشرده باشند. انیمیشن‌های خود را با استفاده از ویژگی‌های CSS با شتاب سخت‌افزاری مانند transform و opacity بهینه کنید. از فعال کردن محاسبات مجدد طرح‌بندی در داخل انیمیشن خودداری کنید.

تکنیک‌ها و ملاحظات پیشرفته

استفاده از view-timeline

در حالی که scroll-timeline بر روی خود کانتینر پیمایش متمرکز است، view-timeline کنترل دقیق‌تری را با ردیابی دید یک عنصر در داخل کانتینر پیمایش خود فراهم می‌کند. این به شما امکان می‌دهد انیمیشن‌هایی ایجاد کنید که بر اساس زمانی که یک عنصر وارد یا از viewport خارج می‌شود، فعال می‌شوند.

نحو view-timeline شبیه به scroll-timeline است:

            view-timeline: <timeline-name> [ <orientation> ]?;
            

              
                Copy
              
            
          

با این حال، به جای اعمال آن به کانتینر پیمایش، آن را به عنصری که می‌خواهید ردیابی کنید، اعمال می‌کنید.

            /* HTML */
<div class="scroll-container">
 <div class="view-tracked-element">...
 </div>
</div>

            

              
                Copy
              
            
          

            /* CSS */
.view-tracked-element {
 view-timeline: my-view-timeline block;
 animation: fade-in 1s linear forwards;
 animation-timeline: my-view-timeline;
 animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

در این مثال، .view-tracked-element انیمیشن fade-in خود را زمانی شروع می‌کند که عنصر 25٪ در کانتینر پیمایش قابل مشاهده باشد و انیمیشن را زمانی کامل می‌کند که عنصر 75٪ قابل مشاهده باشد. ویژگی animation-range نقاط شروع و پایان انیمیشن را نسبت به دید عنصر تعریف می‌کند. `entry` موقعیت شروع جدول زمانی را مشخص می‌کند. `cover` موقعیت پایان جدول زمانی را مشخص می‌کند.

ویژگی animation-range

ویژگی animation-range برای تنظیم دقیق انیمیشن‌های هدایت شده توسط view-timeline بسیار مهم است. به شما امکان می‌دهد نقاط دقیق در چرخه عمر دید عنصر را مشخص کنید که در آن انیمیشن باید شروع و پایان یابد.

نحو:

            animation-range: <start-position> <end-position>;
            

              
                Copy
              
            
          

مقادیر ممکن برای <start-position> و <end-position> عبارتند از:

• entry: نقطه‌ای که عنصر برای اولین بار وارد viewport کانتینر پیمایش می‌شود.
• cover: نقطه‌ای که عنصر به طور کامل viewport کانتینر پیمایش را پوشش می‌دهد.
• contain: نقطه‌ای که عنصر به طور کامل در داخل viewport کانتینر پیمایش قرار دارد.
• exit: نقطه‌ای که عنصر شروع به خروج از viewport کانتینر پیمایش می‌کند.
• درصدها: درصدی از ارتفاع یا عرض عنصر، نسبت به کانتینر پیمایش.

به عنوان مثال:

            animation-range: entry 10% exit 90%;
            

              
                Copy
              
            
          

این انیمیشن را زمانی شروع می‌کند که عنصر وارد viewport می‌شود و 10٪ قابل مشاهده است و انیمیشن را زمانی به پایان می‌رساند که عنصر از viewport خارج می‌شود و 90٪ قابل مشاهده است.

سازگاری مرورگر و Polyfills

مانند هر فناوری وب جدید، سازگاری مرورگر یک ملاحظه مهم است. در زمان نگارش این مقاله، جدول‌های زمانی پیمایش CSS از پشتیبانی خوبی در مرورگرهای مدرن مانند Chrome، Edge و Safari برخوردار هستند. پشتیبانی از Firefox همچنان در حال توسعه است.

برای اطمینان از اینکه انیمیشن‌های شما در طیف وسیع‌تری از مرورگرها کار می‌کنند، می‌توانید از polyfills استفاده کنید. polyfill قطعه‌ای از کد جاوا اسکریپت است که عملکردی را ارائه می‌دهد که توسط یک مرورگر خاص به صورت بومی پشتیبانی نمی‌شود. چندین polyfill برای جدول‌های زمانی پیمایش CSS در دسترس هستند. برای یافتن گزینه‌های مناسب، در اینترنت «CSS Scroll Timeline polyfill» را جستجو کنید. توجه داشته باشید که استفاده از polyfills می‌تواند بر عملکرد تأثیر بگذارد، بنابراین کاملاً آزمایش کنید.

ملاحظات دسترسی‌پذیری

در حین ایجاد انیمیشن‌های جذاب، در نظر گرفتن دسترسی‌پذیری بسیار مهم است. انیمیشن‌ها می‌توانند برای کاربران با حساسیت‌ها یا ناتوانی‌های خاص، حواس‌پرتی یا حتی مضر باشند. در اینجا برخی از بهترین روش‌ها آورده شده است:

• احترام به prefers-reduced-motion: این پرس و جوی رسانه CSS به کاربران اجازه می‌دهد تا نشان دهند که انیمیشن‌های کمی را ترجیح می‌دهند. از آن برای غیرفعال کردن یا کاهش شدت انیمیشن‌های مبتنی بر پیمایش خود برای این کاربران استفاده کنید.

            @media (prefers-reduced-motion: reduce) {
 .animated-element {
 animation: none !important;
 }
}
            

              
                Copy
              
            
          

• ارائه جایگزین‌ها: اطمینان حاصل کنید که محتوای منتقل شده توسط انیمیشن از طریق روش‌های دیگر، مانند متن یا تصاویر ثابت، نیز در دسترس است. فقط به انیمیشن برای انتقال اطلاعات مهم تکیه نکنید.
• کوتاه و ظریف نگه داشتن انیمیشن‌ها: از انیمیشن‌های طولانی و پر زرق و برق که می‌توانند حواس‌پرتی یا طاقت‌فرسا باشند، خودداری کنید. انیمیشن‌های ظریفی که تجربه کاربری را بهبود می‌بخشند، عموماً ترجیح داده می‌شوند.
• تست با فناوری‌های کمکی: از صفحه‌خوان‌ها و سایر فناوری‌های کمکی برای آزمایش انیمیشن‌های مبتنی بر پیمایش خود استفاده کنید و اطمینان حاصل کنید که برای همه کاربران در دسترس هستند.

مثال‌های عملی و موارد استفاده

بیایید برخی از نمونه‌های عملی نحوه استفاده از جدول‌های زمانی پیمایش CSS برای بهبود طراحی وب خود را بررسی کنیم.

مثال 1: نوار پیشرفت

نوار پیشرفتی که پیشرفت کاربر را در صفحه نشان می‌دهد، یک کاربرد متداول و مفید از جدول‌های زمانی پیمایش است.

            /* HTML */
<div class="scroll-container">
 <div class="progress-bar-container">
 <div class="progress-bar"></div>
 </div>
 <div class="content">...
 </div>
</div>

            

              
                Copy
              
            
          

            /* CSS */
.scroll-container {
 overflow-y: auto;
 height: 500px;
 scroll-timeline: page-scroll block;
 position: relative; /* Required for absolute positioning of the progress bar */
}

.progress-bar-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 5px;
 background-color: #eee;
 z-index: 10; /* Ensure it's on top */
}

.progress-bar {
 height: 100%;
 width: 0%;
 background-color: #4CAF50;
 animation: fill-progress 1s linear forwards;
 animation-timeline: page-scroll;
 transform-origin: left;
}

@keyframes fill-progress {
 to {
 width: 100%;
 }
}
            

              
                Copy
              
            
          

این مثال یک نوار پیشرفت ایجاد می‌کند که با پیمایش کاربر به سمت پایین صفحه، به صورت افقی پر می‌شود. انیمیشن fill-progress عرض نوار پیشرفت را از 0٪ به 100٪ افزایش می‌دهد و ویژگی animation-timeline آن را به جدول زمانی page-scroll پیوند می‌دهد.

مثال 2: اثر اختلاف منظر

پیمایش اختلاف منظر با حرکت دادن عناصر پس‌زمینه با سرعتی متفاوت از عناصر پیش‌زمینه، حس عمق ایجاد می‌کند. جدول‌های زمانی پیمایش CSS می‌توانند پیاده‌سازی افکت‌های اختلاف منظر را ساده کنند.

            /* HTML */
<div class="scroll-container">
 <div class="parallax-background"></div>
 <div class="content">...
 </div>
</div>

            

              
                Copy
              
            
          

            /* CSS */
.scroll-container {
 overflow-y: auto;
 height: 500px;
 scroll-timeline: parallax-scroll block;
 position: relative;
}

.parallax-background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 200%; /* Make it taller than the container */
 background-image: url('background-image.jpg');
 background-size: cover;
 transform-origin: top;
 animation: parallax-effect 3s linear forwards;
 animation-timeline: parallax-scroll;
}

@keyframes parallax-effect {
 to {
 transform: translateY(-50%); /* Adjust the translateY value for the desired parallax effect */
 }
}
            

              
                Copy
              
            
          

در این مثال، عنصر parallax-background با استفاده از تبدیل translateY با پیمایش کاربر به صورت عمودی حرکت می‌کند. ویژگی animation-timeline انیمیشن parallax-effect را به جدول زمانی parallax-scroll پیوند می‌دهد.

مثال 3: هدر چسبنده

یک هدر چسبنده که با پیمایش کاربر در بالای صفحه قابل مشاهده می‌ماند، الگوی UI متداول دیگری است که می‌توان با جدول‌های زمانی پیمایش CSS پیاده‌سازی کرد.

            /* HTML */
<header class="sticky-header">
 <nav>...
 </nav>
</header>
<div class="scroll-container">
 <div class="content">...
 </div>
</div>

            

              
                Copy
              
            
          

            /* CSS */
.scroll-container {
 overflow-y: auto;
 height: 500px;
 scroll-timeline: sticky-scroll block;
 padding-top: 60px; /* Prevent content from being hidden behind the sticky header */
}

.sticky-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color: #fff;
 z-index: 10;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 /* Initial state (hidden) */
 transform: translateY(-100%);
 animation: slide-down 1s linear forwards;
 animation-timeline: sticky-scroll;
}

@keyframes slide-down {
 to {
 transform: translateY(0%); /* Final state (visible) */
 }
}
            

              
                Copy
              
            
          

این مثال در ابتدا هدر را با استفاده از `translateY(-100%)` در بالای viewport پنهان می‌کند. با پیمایش کاربر، انیمیشن slide-down هدر را به نمایش در می‌آورد. به طور بحرانی، انیمیشن به جدول زمانی sticky-scroll متصل است و آن را با پیمایش هدایت می‌کند.

بهترین روش‌ها برای استفاده از جدول‌های زمانی پیمایش CSS

• ساده شروع کنید: با انیمیشن‌های اساسی شروع کنید و با کسب تجربه، به تدریج پیچیدگی را افزایش دهید.
• از شتاب سخت‌افزاری استفاده کنید: از ویژگی‌های CSS مانند transform و opacity برای اطمینان از عملکرد انیمیشن روان استفاده کنید.
• کاملاً تست کنید: انیمیشن‌های مبتنی بر پیمایش خود را در دستگاه‌ها و مرورگرهای مختلف تست کنید تا از سازگاری و عملکرد اطمینان حاصل کنید.
• اولویت‌بندی دسترسی‌پذیری: همیشه دسترسی‌پذیری را در نظر بگیرید و جایگزین‌هایی را برای کاربرانی که حرکت کاهش یافته را ترجیح می‌دهند، ارائه دهید.
• بهینه سازی برای عملکرد: از محاسبات مجدد طرح‌بندی غیر ضروری خودداری کنید و انیمیشن‌های خود را تا حد امکان سبک وزن نگه دارید.
• کد خود را مستند کنید: انیمیشن‌های مبتنی بر پیمایش خود را به وضوح مستند کنید تا درک و نگهداری آنها آسان‌تر شود.
• سازگاری با مرورگرهای مختلف را در نظر بگیرید: پشتیبانی از مرورگر را بررسی کنید و در صورت نیاز از polyfills استفاده کنید.
• از نام‌های توصیفی جدول زمانی استفاده کنید: از نام‌های واضح و معنادار برای جدول‌های زمانی پیمایش خود استفاده کنید تا خوانایی کد را بهبود بخشید (به عنوان مثال، product-card-animation به جای timeline1).
• ابتدا به موبایل فکر کنید: هنگام ایجاد انیمیشن، دستگاه‌های تلفن همراه را در نظر داشته باشید، برای صفحه‌های کوچک‌تر بهینه کنید.

آینده انیمیشن‌های مبتنی بر پیمایش

جدول‌های زمانی پیمایش CSS یک تغییر‌دهنده بازی برای ایجاد تجربه‌های وب جذاب و تعاملی هستند. با بهبود مداوم پشتیبانی مرورگرها، می‌توانیم انتظار داشته باشیم که از این فناوری استفاده‌های نوآورانه‌تر و خلاقانه‌تری را ببینیم. توانایی همگام‌سازی انیمیشن‌ها با موقعیت پیمایش، دنیایی از امکانات را برای بهبود رابط‌های کاربری و ایجاد تجربه‌های وب واقعاً فراگیر باز می‌کند.

آینده انیمیشن‌های مبتنی بر پیمایش شامل ویژگی‌های پیشرفته‌تر و ادغام با سایر فناوری‌های وب است. انتظار می‌رود پیشرفت‌هایی در عملکرد، دسترسی‌پذیری و ابزارهای توسعه‌دهنده مشاهده شود. قدرت جدول‌های زمانی پیمایش CSS را کشف کنید و ابعاد جدیدی از طراحی وب را باز کنید!

نتیجه

جدول‌های زمانی پیمایش CSS یک راه قدرتمند و کارآمد برای ایجاد انیمیشن‌های مبتنی بر پیمایش ارائه می‌دهند. با درک ویژگی‌های scroll-timeline و view-timeline، همراه با ویژگی animation-range، می‌توانید طیف وسیعی از امکانات خلاقانه را باز کنید. به یاد داشته باشید که عملکرد، دسترسی‌پذیری و سازگاری با مرورگرهای مختلف را در اولویت قرار دهید تا اطمینان حاصل کنید که انیمیشن‌های شما یک تجربه یکپارچه و جذاب را برای همه کاربران ارائه می‌دهند. قدرت انیمیشن‌های مبتنی بر پیمایش را در آغوش بگیرید و طرح‌های وب خود را به سطح بعدی ارتقا دهید!